<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>陈广安-日历</title>
  <link rel="stylesheet" href="./static/iconfont/iconfont.css">
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
    }

    #app * {
      -moz-user-select: none;
      /*火狐*/
      -webkit-user-select: none;
      /*webkit浏览器*/
      -ms-user-select: none;
      /*IE10*/
      -khtml-user-select: none;
      /*早期浏览器*/
      user-select: none;
    }

    .flex {
      display: flex;
      align-items: center;
    }

    .right-bottom {
      display: none;
    }

    #app {
      align-items: flex-start;
      width: 100%;
    }

    .c1 {
      flex: 1;
    }

    .c2 {
      justify-content: space-between;
      padding: 10px 0;
      font-size: 20px;
      margin-bottom: 10px;
    }

    .c2 .b1>div {
      width: 40px;
      text-align: center;
      cursor: pointer;

    }

    .c2 .b2 {
      font-size: 14px;
      border-radius: 30px 0 0 30px;
      padding: 0 10px 0 15px;
      line-height: 30px;
      background: #eee;
      opacity: .5;
    }

    .c2 .b2.true {
      opacity: 1;
    }

    .c2 .custom-icon {
      font-size: 20px;
    }

    .c3 {
      padding: 6px 0;
      border-bottom: 1px solid #ccc;
      margin-bottom: 5px;
    }

    .c4 {
      text-align: center;
      width: 14.2857%;
      margin: 6px auto;
    }

    .c4:nth-child(6),
    .c4:nth-child(7) {
      color: #ee7d75;
    }

    .c5 {
      flex-wrap: wrap;
      color: #555;
    }

    .c6 {
      text-align: center;
      cursor: pointer;
      width: 14.2857%;
    }

    .c7 {
      position: relative;
      border-radius: 10px;
      width: 52px;
      margin: 3px auto;
      height: 52px;
    }

    .c7.isWeekend {
      color: #ee7d75;
    }

    .c7.isToday {
      background: #eee;
    }

    .c7.clickIndex {
      background: #eee;
    }

    .c7:hover {
      background: #eee;
    }

    .c7.false {
      opacity: 0.3;
    }

    .c8 {
      font-size: 16px;
      font-weight: bold;
      padding-top: 6px;
    }

    .c9 {
      width: 8px;
      height: 2px;
      border-radius: 2px;
      position: absolute;
      right: 50%;
      margin-right: -4px;
      bottom: 4px;
      background: #c00;
    }

    .c10 {
      font-size: 12px;
      transform: scale(.88);
    }

    .c11 {
      margin-left: 3vw;
      width: 280px;
      margin-top: 10px;
    }

    .c12 {
      padding: 8px 0;
      justify-content: space-between;
    }

    .c12 span {
      display: inline-block;
      line-height: 20px;
      padding: 0px 5px;
      border-radius: 5px;
      margin-left: 5px;
      font-size: 12px;
      color: #fff;
    }

    .c12 .t1 {
      background: #7fde9e;
    }

    .c12 .t2 {
      background: #fb9890;
    }

    .c12 .t3 {
      background: #f9b87c;
    }

    .c12 .t4 {
      background: #aaa;
    }

    .c12.false {
      color: #ccc;
    }

    .c13 {
      margin-bottom: 20px;
      font-size: 20px;
      font-weight: bold;
      justify-content: space-between;
    }

    .c13 .custom-icon {
      font-weight: normal;
      margin-left: 20px;
      font-size: 20px;
    }

    .c13 .custom-icon:hover {
      color: #006a90;
      cursor: pointer;
    }

    .c14 {
      color: #aaa;
      margin-top: 30px;
      font-size: 16px;
    }

    .c15 {
      padding: 10px 20px;
      font-size: 14px;
    }

    .c16 {
      color: #999;
    }

    .c17 {
      position: absolute;
      left: 3px;
      top: 5px;
      font-size: 12px;
      transform: scale(.7);
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="c1">
      <div class="c2 flex">
        <div class="flex b1">
          <div @click="_onClickSlideApi('up')"><i class="custom-icon custom-icon-zk-l"></i></div>
          <div @click="_onClickSlideApi('down')"><i class="custom-icon custom-icon-zk-r"></i></div>
        </div>
        <div>
          {{year}} {{ss[(year - 1900)%12]}}年
          {{month<10?'0'+month:month}}月 </div>
            <div class="b2" :class="{
          true:!isToDay
        }" @click="init()">返回今天</div>
        </div>
        <div class="c3 flex">
          <div class="c4" v-for="(v,i) in weekList" :key="i"> {{v}} </div>
        </div>
        <div class="c5 flex">
          <div class="c6" v-for="(v,idx) in dayList" :key="idx">
            <div :class="{
                isToday:v.isToday,
                isWeekend:v.isWeekend,
                clickIndex:clickIndex == idx,
                false:v.type == 0,
            }" class="c7" @click="clickDayData = v;clickIndex=idx">
              <div class="c8">{{v.day?v.day:''}}</div>
              <div class="c10">
                {{v.lunar.IMonthCn}}{{v.lunar.IDayCn}}
              </div>
              <div class="c9" v-if="v.data.length"></div>
              <div class="c17" v-if="v.isWeekend">休</div>
            </div>
          </div>
        </div>
      </div>
      <list-item :data="clickDayData.data" v-if="clickDayData"></list-item>
      <list-item :data="list" v-else></list-item>
    </div>
  </div>
  <script type="text/javascript" src="./static/plug_in/vue.min.js"></script>
  <script type="text/javascript" src="./static/plug_in/calendar.js"></script>
  <script type="text/javascript" src="./static/json/date.js"></script>
  <script>
    //获取当前到指定日期还有多少天
    function getDays(y, date) {
      var EndTime = new Date(y + "/" + date); // 指定日期和时间
      var NowTime = new Date(); // 当前系统时间
      let mm = NowTime.getMonth() + 1 + "";
      let dd = NowTime.getDate() + "";

      if (y == NowTime.getFullYear() + 1) y = y - 1;

      let mmdd = y + "/" + mm + "/" + dd + " " + "23:59:59";
      NowTime = new Date(mmdd);
      var t = EndTime.getTime() - NowTime.getTime();
      var d = Math.floor(t / 1000 / 60 / 60 / 24);
      var h = Math.floor((t / 1000 / 60 / 60) % 24);
      var m = Math.floor((t / 1000 / 60) % 60);
      var s = Math.floor((t / 1000) % 60);
      // console.log('当前时间'+ mmdd,'目标时间'+y+date,'剩余'+d+'天');
      return d;
    }

    let _this;

    Vue.component('list-item', {
      props: {
        data: {
          list: Array
        }
      },
      template: `
        <div class="c15">
          <div class="c14" v-if="data.length == 0">暂无记录</div>
          <div class="c12 flex" v-for="(v,i) in data" :key="i" :class="{false:v.surplusDay < 0}">
            <div>{{v.cMonth<10?'0'+v.cMonth:v.cMonth}}月{{v.cDay<10?'0'+v.cDay:v.cDay}}号：{{v.title}} </div>
            <div class="flex">
              <div v-if="v.surplusDay >= 0">
                {{v.surplusDay == 0?'今天':(v.surplusDay-1) == 0
                ?'明天':(v.surplusDay-1)+'天后'}}
              </div>
              <div v-else>已过</div>
              <span class="t1" v-if="v.type == '1'">生日</span>
              <span class="t2" v-if="v.type == '2'">节日</span>
              <span class="t3" v-if="v.type == '3'">纪念日</span>
              <span class="t4" v-if="v.type == '4'">忌日</span>
            </div>  
          </div>
        <div>
        `,
    });

    let vm = new Vue({
      el: "#app",
      data: {
        ss: ["鼠", "牛", "虎", "兔", "龙", "蛇", "马", "羊", "猴", "鸡", "狗", "猪"],
        clickIndex: 99,
        clickDayData: null,
        weekList: ["一", "二", "三", "四", "五", "六", "日"],
        year: 2020,
        month: 10,
        day: 10,
        dayList: [],
        start_time: "", //  月初的时间戳
        end_time: "", //  月末的时间戳
        current: {},
        listData: dateJSON,
      },
      created() {
        _this = this;
        let _date = new Date();
        this.current = calendar.solar2lunar();
        this.init();
      },
      computed: {
        isToDay() {
          let _date = new Date();
          return _date.getFullYear() == this.year && (_date.getMonth() + 1) == this.month && _date.getDate() == this.day;
        },
        list() {
          let arr = [];
          this.dayList.forEach((v, i) => {
            //判断大小周
            v.isWeekend = ((v.isBig) && (v.isWeekend == 6 || v.isWeekend == 0)) || ((!v.isBig) && (v.isWeekend == 0));
            //用来标记是否今天
            v.isToday = (v.year == this.current.cYear) && (v.month == this.current.cMonth) && (v.day == this.current.cDay);

            this.listData.forEach((val) => {
              if (v != null) {
                let year = Number(v.year);
                let month = Number(val.month);
                let day = Number(val.day);

                //如果等于农历，进行农历转公历
                if (val.day_type == 0) {
                  let Solar = calendar.lunar2solar(year, month, day);

                  //如果农历的月份 等于 数据 月份 转换的年份减1
                  if(this.current.lMonth === month){
                    Solar = calendar.lunar2solar(year-1, month, day);
                  }

                  month = Solar.cMonth;
                  day = Solar.cDay;
                }
                if (this.year == year && month == v.month && v.day == day) {

                  //计算剩余天数
                  let surplusDay =  -1;//默认剩余天数 标记已过

                  //如果切换的年份 等于 当前年份 才计算剩余天数
                  if(v.year >= this.current.cYear){
                    surplusDay = getDays(
                      year,
                      v.month + "/" + day + " 23:59:59"
                    )
                  }
    
                  let obj = {
                    ...val,
                    cYear: year,
                    cMonth: v.month,
                    cDay: day,
                    surplusDay,
                  }
                  this.dayList[i].data.push(obj);
                  arr.push(obj);
                }
              }
            });
          });
          return arr;
        },
      },
      methods: {
        async init() {
          this.clickDayData = null;

          //  获取当前时间  赋值年，月
          await this.initTime();

          //  更新日历
          await this._runMonth();
        },
        //  初始化时间
        initTime() {
          var nowTimeData = this._getTimeNowApi();
          console.log("inititme", nowTimeData);

          this.year = nowTimeData.year;
          this.month = nowTimeData.month;
          this.day = nowTimeData.day;

          // 今日时间为：2020-9-16
          // console.log('今日时间为：' + this.year + '-' + this.month + '-' + this.day)
        },

        async _runMonth() {
          console.log(
            "=============================================================="
          );

          //  获取当前月的每一天的数据    1~31
          await this.initApi();

          //  根据当前选择的年月，更新start_time   end_time
          await this._timeApi();

          // console.log(this.start_time)
          // console.log(this.end_time)
          //  更新记录
          // await this.onClickSignLog()

          let dataWeek = await this.getweek(this._getNowApi());

          // console.log(this._getNowApi())
          // this.slideDataList[0] = []
          // this.slideDataList[1] = dataWeek
          // this.slideDataList[2] = []

          // console.log(this.slideDataList)

          console.log(
            "=============================================================="
          );
        },

        _getTimeNowApi() {
          //  初始化时间
          var date = new Date();

          var year = date.getFullYear();
          var month = parseInt(date.getMonth() + 1);
          var day = date.getDate();

          if (month < 10) {
            month = "0" + month;
          }
          if (day < 10) {
            day = "0" + day;
          }

          let returnData = {
            year: year,
            month: parseInt(month),
            day: day,
          };

          return returnData;
        },

        //  滑动日历触发（左右滑动）
        _onClickSlideApi(type) {
          this.clickIndex = 99;
          this.clickDayData = null;
          if (type == "down") {
            console.log("向右滑动前一个月");
            if (this.month == 12) {
              this.year = this.year + 1;
              this.month = 1;
            } else {
              this.month = this.month + 1;
            }
          } else {
            console.log("向左滑动后退一个月");
            if (this.month == 1) {
              this.year = this.year - 1;
              this.month = 12;
            } else {
              this.month = this.month - 1;
            }
          }
          this._runMonth();
        },

        _getNowApi() {
          console.log(
            "当前日期：" + this.year + "-" + this.month + "-" + this.day
          );

          let data = {
            Day: 1,
            Month: this.month,
            Year: this.year,
          };

          console.log(data);
          return data;
        },
        //  获取当前月的每一天的数据
        initApi() {
          this.dayList = this.createDayList(this.month, this.year);
          console.log(this.dayList);
        },

        //计算是否大小周
        isBig(dd) {
          let d1 = new Date(dd);
          let d2 = new Date();
          d2.setMonth(0);
          d2.setDate(2);
          let rq = d1 - d2;
          let s1 = Math.ceil(rq / (24 * 60 * 60 * 1000));
          let s2 = Math.ceil(s1 / 7);
          return s2 % 2 === 0 ? true : false;
        },

        getPushData(year, month, day, type) {
          return {
            year,
            month,
            day,
            data: [],
            type,
            lunar: calendar.solar2lunar(year, month, day),
            isBig: this.isBig(year + "-" + month + "-" + day),
            isWeekend: new Date(year + "/" + month + "/" + day).getDay(),
          };
        },

        //创建每个月日历数据，传入月份1号前面用null填充
        createDayList(month, year) {
          const count = this.getDayNum(month, year); //获取当月总天数

          let list = [];

          //获取上个月数据
          let upYear = year;
          let upMonth = month - 1;
          if (upMonth == 0) {
            upMonth = 12;
            upYear = upYear - 1;
          }
          let upCount = this.getDayNum(upMonth, upYear); //获取上个月总天数
          let _week = new Date(year + "/" + month + "/1").getDay(); //获取月初一号是星期几
          if (_week == 0) _week = 7; //如果等于周日 赋值 7 用来掉调换周一跟周日位置
          for (let i = 1; i < _week; i++) {
            let upDay = upCount - _week + (i + 1);
            list.push(this.getPushData(upYear, upMonth, upDay, 0));
          }

          //获取每个月固定的28天
          for (let i = 1; i <= 28; i++) {
            list.push(this.getPushData(year, month, i, 1));
          }

          //获取当月减去28天后的剩余几天
          for (let i = 29; i <= count; i++) {
            list.push(this.getPushData(year, month, i, 1));
          }

          //获取下个月数据
          let downYear = year;
          let downMonth = month + 1;
          if (downMonth == 13) {
            downMonth = 1;
            downYear = upYear + 1;
          }
          let weekEnd = new Date(year + "/" + month + "/" + count).getDay(); //获取月底最后一天是星期几
          let downCount = 0;
          if (weekEnd == 0) weekEnd = 7;
          for (let i = weekEnd + 1; i <= 7; i++) {
            downCount = i - weekEnd;
            list.push(this.getPushData(downYear, downMonth, i - weekEnd, 0));
          }

          //整个盒子 补满日历
          if (list.length == 35) {
            for (let i = downCount; i <= downCount + 6; i++) {
              list.push(this.getPushData(downYear, downMonth, i + 1, 0));
            }
          }

          return list;
        },
        //计算传入月份有多少天
        getDayNum(month, year) {
          let dayNum = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

          if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
            dayNum[1] = 29;
          }
          return dayNum[month - 1];
        },
        //  传时间获取月初月末时间
        _timeApi() {
          let startDate = this.year + "-" + this.month + "-" + this.day;

          let startData = this._timeMonthStartApi(startDate + " 00:00:00");

          this.start_time = startData.time_int;

          let endData = this._timeMonthEndApi(startDate + " 00:00:00");

          this.end_time = endData.time_int;
        },
        _timeMonthStartApi(timeDate) {
          var date = new Date(timeDate);

          date.setDate(1);

          var month = parseInt(date.getMonth() + 1);

          var day = date.getDate();
          if (month < 10) {
            month = "0" + month;
          }
          if (day < 10) {
            day = "0" + day;
          }

          let timeDateStart = date.getFullYear() + "-" + month + "-" + day;

          let returnData = {
            time_type: "start_time",
            time_int: Date.parse(timeDateStart + " 00:00:00") / 1000,
            time_date: timeDateStart,
            year: date.getFullYear(),
            month: month,
            day: day,
          };

          return returnData;
        },
        _timeMonthEndApi(timeDate) {
          var endDate = new Date(timeDate);
          var currentMonth = endDate.getMonth();

          var nextMonth = ++currentMonth;
          var nextMonthFirstDay = new Date(
            endDate.getFullYear(),
            nextMonth,
            1
          );
          var oneDay = 1000 * 60 * 60 * 24;
          var lastTime = new Date(nextMonthFirstDay - oneDay);
          var endMonth = parseInt(lastTime.getMonth() + 1);
          var endDay = lastTime.getDate();
          if (endMonth < 10) {
            endMonth = "0" + endMonth;
          }
          if (endDay < 10) {
            endDay = "0" + endDay;
          }

          let timeDateEnd =
            endDate.getFullYear() + "-" + endMonth + "-" + endDay;

          let returnData = {
            time_type: "end_time",
            time_int: Date.parse(timeDateEnd + " 00:00:00") / 1000,
            time_date: timeDateEnd,
            year: endDate.getFullYear(),
            month: endMonth,
            day: endDay,
          };

          return returnData;
        },
        //  2020-08-01
        getweek(date) {
          let weeks = [];
          let dates = this.getDates(date);
          // let len = Math.ceil(dates.weeks.length / 7);
          // for (let i = 0; i < len; i++) {
          // weeks.push(dates.weeks.slice(i * 7, 7 + (i * 7)));
          // }
          // dates.weeks = weeks
          return dates;
        },
        getDates(date) {
          let dates = {
            year: date.Year,
            month: date.Month,
            firstDay: new Date(date.Year, date.Month, 1).getDay(),
            lastDay: new Date(date.Year, date.Month + 1, 0).getDay(),
            endDate: new Date(date.Year, date.Month + 1, 0).getDate(),
            weeks: [],
          };

          //计算上月日期
          for (let i = dates.firstDay; i > 0; i--) {
            let dateinfo = {};
            dateinfo.date = new Date(date.Year, date.Month, -i + 1).getDate();
            dateinfo.isClick = false;
            dates.weeks.push(dateinfo);
          }
          //计算本月日期
          for (
            let i = 1;
            i <= new Date(date.Year, date.Month + 1, 0).getDate();
            i++
          ) {
            let nowisClick = true;
            let dateinfo = {};
            dateinfo.date = i;
            if (this.dateType == "dateCustom") {
              nowisClick = false;
              if (
                this.dateCustom[dates.year] &&
                this.dateCustom[dates.year][dates.month]
              ) {
                for (
                  let j = 0;
                  j < this.dateCustom[dates.year][dates.month].length;
                  j++
                ) {
                  if (this.dateCustom[dates.year][dates.month][j] == i) {
                    nowisClick = true;
                  }
                }
              }
            }
            dateinfo.isClick = nowisClick;
            dates.weeks.push(dateinfo);
          }
          //计算下月日期
          let len = 7 - dates.lastDay;
          if (42 - dates.weeks.length >= 7) {
            len += 7;
          }
          for (let i = 1; i < len; i++) {
            let dateinfo = {};
            dateinfo.date = i;
            dateinfo.isClick = false;
            dates.weeks.push(dateinfo);
          }
          return dates;
        },
      },
    });
  </script>
</body>

</html>